import React from 'react';
import ReactDOM from 'react-dom';
import { Checkbox, Button } from 'antd';
// import { Router,Route,hashHistory,IndexRoute} from 'react-router';
import Header from '../modules/Header';

import  './Mymusic.css';
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var browserHistory = require('react-router').browserHistory;
var IndexLink = require('react-router').IndexLink;
var NavLink = require('./NavLink.js');
// var NavLink = require('./like.js');


// var Repos = require('./Repos.js');
// var Repo = require('./Repo.js');

class Mymusic extends React.Component {

  render() {     
       var bannerStyle= {width:"100%",height:"380px",background:"url(./images/banner/banner.jpg)"};
       var imgFer={position: "relative",top:"65px"};
       var midStyle={width:"1200px",margin:"0 auto"};
       var imgStyle={width:"100px",height:"100px",borderRadius:"50%",border:"1px solid white ",marginLeft:"44%"};
       var user={fontSize:"30px",color:"white",width:"120px",height:"60px",marginLeft:"44%",position: "relative",top:"65px"};
       var userName={paddingRight:"12px",fontSize:"28px"};
       var bannerList={width: "120px",height: "40px",color:" white",marginLeft:"44%",fontSize:"18px",position: "relative",top:"65px"};
       var bannerImg={marginTop:"10px"}
       var letterStyle = {
        clear:'both'
        };
       var bannerListLi={float: "left",marginLeft:" 15px"};
       
       return(      
            <div>
            <Header/> 
            <div className="box" style={letterStyle}></div>
            <div style={bannerStyle}>     
                <div style={midStyle}>            
                    <div style={imgFer}>
                        <img style={imgStyle} src="./images/banner/g.gif "/>
                    </div>
                    <div  style={user}>
                        <span style={userName} >用户</span>
                        <a style={bannerImg} href="https://y.qq.com/vipportal/">
                            <img  src="./images/style/2x.png"/>
                        </a>
                    </div>
                    <ul style={bannerList} className="bannerList">
                        <li style={bannerListLi}><span>0</span>关注</li>
                        <li style={bannerListLi}><span>0</span>粉丝</li>
                    </ul>
                    <br/>
                    <ul className="navList">
                        {/*<li><IndexLink activeClassName="active" className="fontcolor" to="/Mymusic">我喜欢</IndexLink></li>*/}
                        
                        <li><NavLink  className="fontcolor fontcolor_1" to="/Mymusic/Like">我喜欢</NavLink></li>
                        <li><NavLink className="fontcolor" to="/Mymusic/Songlist">我创建的歌单</NavLink></li>
                        <li><NavLink className="fontcolor" to="/Mymusic/Attention">关注</NavLink></li>
                        <li><NavLink className="fontcolor" to="/Mymusic/Fans">粉丝</NavLink></li>
                        <li><NavLink className="fontcolor" to="/Mymusic/Video">我上传的视频</NavLink></li>
                    </ul>
                </div> 
            </div>
            <div className="contentFer">
                <div className="contentList">

                    {this.props.children}
                </div>
            </div>
          
        </div>
       )
  }
}

module.exports = Mymusic;